<template>
  <!-- 主播管理 -->
  <a-spin class="anchor-review" tip="加载中..." :spinning="isLoading">
    <div class="title-wapper">
      <Title :conf="{ title: '订单实时监控', src: require('@/assets/images/icon_ddgl_jk@3x.png') }" class="margin-bott-10" :fontSize="18" :imgWidth="40" :imgHieght="40" />
      <div class="update-time">更新时间：{{ moment(new Date()).format('YYYY-MM-DD hh:mm:ss') || 'YYYY-MM-DD hh:mm:ss' }}</div>
      <div>
        <span>日期筛选：</span>
        <a-range-picker @change="getTimeMonitoring" v-model="orderSelectDate" />
      </div>
    </div>
    <div class="date-wapper">
      <div>
        <div>
          <p class="number-p">{{ orderData.totalOrderNum || 0 }}</p>
          <p class="text-p">总订单数量</p>
        </div>
        <div>
          <p class="number-p">￥{{ (orderData.totalMoney || 0) | fenToYuan }}</p>
          <p class="text-p">总订单金额</p>
        </div>
      </div>
      <!-- <div>
        <div>
          <p class="number-p">{{ orderData.completeOrderNum || 0 }}</p>
          <p class="text-p">已核销订单数量</p>
        </div>
        <div>
          <p class="number-p">￥{{ (orderData.completeMoney || 0) | fenToYuan }}</p>
          <p class="text-p">已核销订单金额</p>
        </div>
      </div> -->
      <div>
        <div>
          <p class="number-p">{{ orderData.refundOrderNum || 0 }}</p>
          <p class="text-p">已退款订单数量</p>
        </div>
        <div>
          <p class="number-p">￥{{ (orderData.refundMoney || 0) | fenToYuan }}</p>
          <p class="text-p">已退款订单金额</p>
        </div>
      </div>
      <div>
        <div>
          <p class="number-p">{{ orderData.unusedOrderNum || 0 }}</p>
          <p class="text-p">待使用订单数量</p>
        </div>
        <div>
          <p class="number-p">￥{{ (orderData.unusedMoney || 0) | fenToYuan }}</p>
          <p class="text-p">待使用订单金额</p>
        </div>
      </div>
    </div>
    <!-- 筛选 -->
    <div class="filter">
      <div class="l search-box">
        <div>
          <span>订单：</span>
          <a-input-search style="width:240px;" type="text" placeholder="订单编号/用户姓名/手机号" allowClear v-model="search.orderInfo" @search="handleByQueryCond" />
        </div>
        <div>
          <span>主播：</span>
          <a-input-search style="width:240px;" type="text" placeholder="主播姓名/手机号" allowClear v-model="search.anchorInfo" @search="handleByQueryCond" />
        </div>
        <div>
          <span>状态：</span>
          <a-select style="width:160px;" placeholder="请选择状态" v-model="search.status" @change="handleByQueryCond">
            <a-select-option v-for="item in orderStatus" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
          </a-select>
        </div>
        <div>
          <span>下单时间：</span>
          <a-range-picker @change="handleByQueryCond" v-model="search.selectDate" />
        </div>
        <div>
          <span>产品名称：</span>
          <a-input-search style="width:240px;" type="text" placeholder="产品名称" allowClear v-model="search.prodName" @search="handleByQueryCond" />
        </div>
        <div>
          <span>购买套餐：</span>
          <a-input-search style="width:240px;" type="text" placeholder="购买套餐" allowClear v-model="search.prodItemName" @search="handleByQueryCond" />
        </div>
      </div>

      <div class="r">
        <a-button type="primary" @click="handleByQueryCond" style="background:#1d6fe9">查询</a-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="main-body">
      <a-table :columns="tableColumns" :pagination="false" :data-source="orderList" :scroll="{ x: 900, y: tableHeight }" rowKey="id">
        <!-- 主播达人 -->
        <template slot="agentName" slot-scope="text, record">
          <p style="margin-bottom:0;">{{ record.agentName || '无' }}：{{ record.agentPhone || '无' }}</p>
        </template>
        <!-- 用户信息 -->
        <template slot="userName" slot-scope="text, record">
          <p style="margin-bottom:0;">{{ record.userName || '无' }}：{{ record.userPhone || '无' }}</p>
        </template>
      </a-table>
    </div>

    <!-- 分页 -->
    <div class="paging-container">
      <a-pagination
        :pageSize="pagination.pageSize"
        v-model="pagination.pageIndex"
        :total="pagination.total"
        showQuickJumper
        showLessItems
        :showTotal="(total) => `共 ${total} 条`"
        style="margin: 10px auto;"
        @change="handlePageChange"
      />
    </div>
  </a-spin>
</template>

<script>
import { orderList, orderTimeMonitoring } from '@/service'
import upload from '@/components/upload/upload'
import { safeDiv } from '@/util'
import moment from 'moment'
import Title from '../anchorManagDesc/components/Title'
export default {
  name: 'orders',
  data() {
    return {
      moment,
      // loading是否显示
      isLoading: false,
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // table数据查询条件
      search: {
        // 1-待审核;2-已通过;3-已驳回
        status: '',
        selectDate: [],
        orderInfo: '',
        anchorInfo: '',
        prodItemName: '',
        prodName: ''
      },
      // 订单列表
      orderList: [],
      // 主播列表总数据条数
      anchorTotal: 0,
      orderSelectDate: [],
      orderData: {}
    }
  },

  components: {
    upload,
    Title
  },

  computed: {
    // table配置
    tableColumns() {
      return [
        { title: '订单编号', width: 150, dataIndex: 'orderId' },
        { title: '下单时间', width: 200, dataIndex: 'createDate' },
        { title: '主播达人', width: 260, dataIndex: 'agentName', scopedSlots: { customRender: 'agentName' } },
        { title: '用户信息', width: 260, dataIndex: 'userName', scopedSlots: { customRender: 'userName' } },
        { title: '产品名称', width: 260, dataIndex: 'productName' },
        { title: '购买套餐', width: 260, dataIndex: 'productItemName' },
        { title: '购买数量', width: 120, dataIndex: 'amount' },
        {
          title: '售价',
          width: 150,
          dataIndex: 'money',
          customRender: (data) => {
            if (!data) return '￥0'
            return '￥' + safeDiv(data, 100)
          }
        },
        {
          title: '佣金收益',
          width: 150,
          dataIndex: 'profit',

          customRender: (data) => {
            if (!data) return '￥0'
            return '￥' + safeDiv(data, 100)
          }
        },
        { title: '订单状态', fixed: 'right', width: 120, dataIndex: 'statusName' }
      ]
    },

    // 状态
    orderStatus() {
      return [
        {
          name: '全部',
          value: ''
        },
        {
          name: '已预约',
          value: 1
        },
        {
          name: '待使用',
          value: 2
        },
        {
          name: '已完成',
          value: 3
        },
        {
          name: '退款中',
          value: 4
        },
        {
          name: '已退款',
          value: 5
        }
      ]
    }
  },

  methods: {
    /**
     * 通过条件查询
     * @returns {void}
     */
    handleByQueryCond() {
      this.pagination.pageIndex = 1
      this.query()
    },

    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    handlePageChange(num) {
      this.pagination.pageIndex = num
      this.query()
    },

    // 拿参数
    getParams() {
      const { pageIndex, pageSize } = this.pagination
      const { status, selectDate, orderInfo, anchorInfo, prodItemName, prodName } = this.search

      return {
        pageIndex,
        pageSize,
        status,
        anchorInfo,
        prodItemName,
        prodName,
        orderInfo,
        startTime: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD 00:00:00') : undefined,
        endTime: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD 23:59:59') : undefined
      }
    },
    // 设置搜索
    setSearch() {
      const { pageIndex, anchorInfo, prodItemName, orderInfo, prodName, startTime, endTime, status } = this.$route.query
      const queryLen = Object.keys(this.$route.query).length
      if (queryLen) {
        this.search = {
          ...this.search,
          pageIndex: pageIndex ? Number(pageIndex) : 1,
          orderInfo: orderInfo || '',
          anchorInfo: anchorInfo || '',
          prodItemName: prodItemName || '',
          prodName: prodName || '',
          status: status || '',
          selectDate: startTime && endTime ? [moment(Number(startTime)), moment(Number(endTime))] : []
          //  selectDate: beginTime ? Number(beginTime) : null,
          //  endTime: endTime ? Number(endTime) : null,
        }
      }
    },
    // 初始化
    initQuery() {
      this.pagination.pageIndex = 1
      this.pagination.pageSize = 10
      this.setPath(this.getParams())
      this.query()
    },

    /**
     * 获取主播信息列表
     * 具体参数参考 getAnchorInfoListApi 方法
     * @returns {Promise<void>}
     */
    async query() {
      const res = await orderList(this.getParams())
      const { anchorOrderListDataList = [], total = 0 } = res || {}
      this.orderList = Object.freeze(anchorOrderListDataList) || []
      this.pagination.total = total || 0
    },
    // 储存搜索字段
    setPath(origin) {
      const { path } = this.$route
      const query = {}
      for (let key in origin) {
        if (origin[key]) query[key] = origin[key]
      }
      if (query.pageIndex <= 1) delete query.pageIndex
      delete query.pageSize
      this.$router
        .replace({
          path,
          query: {
            ...query
          }
        })
        .catch(() => {})
    },
    getParamsTime() {
      const { orderSelectDate } = this
      return {
        startDate: orderSelectDate[0] ? moment(orderSelectDate[0]).format('YYYYMMDD') : undefined,
        endDate: orderSelectDate[1] ? moment(orderSelectDate[1]).format('YYYYMMDD') : undefined
      }
    },
    async getTimeMonitoring() {
      const res = await orderTimeMonitoring(this.getParamsTime())
      const { completeMoney = 0, completeOrderNum = 0, refundMoney = 0, refundOrderNum = 0, totalMoney = 0, totalOrderNum = 0, unusedMoney = 0, unusedOrderNum = 0 } = res || {}
      this.orderData = {
        completeMoney,
        completeOrderNum,
        refundMoney,
        refundOrderNum,
        totalMoney,
        totalOrderNum,
        unusedMoney,
        unusedOrderNum
      }
    }
  },

  mounted() {
    this.isLoading = true
    this.setSearch()
    Promise.all([this.query(), this.getTimeMonitoring()]).then(() => {
      this.isLoading = false
    })
  },

  filters: {
    // 获取直播平台
    getPlatform(val) {
      if (!val) return '无'
      return val === 1 ? '抖音' : '快手'
    },
    // 处理分-元
    fenToYuan(val) {
      if (!val) return 0
      return (val / 100).toFixed(2)
    }
  }
}
</script>

<style lang="less" scoped>
p {
  margin: 0;
}
.anchor-review {
  padding: 16px;
}
/deep/ .title-wapper img {
  background: #1d6fe9;
  box-shadow: 0px 7px 25px -6px #1d6fe9;
  border-radius: 16px;
  margin-right: 5px;
}
// 主播信息弹窗
.anchor-info {
  /deep/ .ant-modal-footer {
    border-top: none;
    padding-bottom: 36px;
    text-align: center;
  }

  //  描述列表样式覆盖
  /deep/ .ant-descriptions-view {
    .ant-descriptions-item-label {
      color: #666666;
    }

    .ant-descriptions-item-content {
      color: #333;
      vertical-align: text-top;
    }
  }
}
.color-f55 {
  color: #f55f4e !important;
}
.search-box {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
  > div {
    margin-right: 15px;
    margin-bottom: 5px;
  }
}
.title-wapper {
  display: flex;
  align-items: center;
  margin: 0 0 12px 0;
  .update-time {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    margin: 0 20px 0 14px;
    position: inherit;
  }
}
.date-wapper {
  background: #f5f5f5;
  border-radius: 2px;
  border: 1px solid #ebebeb;
  display: flex;
  padding: 27px 0 22px 0;
  margin-bottom: 14px;
  > div {
    padding: 0 20px;
    display: flex;
    justify-content: space-around;
    width: calc(100% / 3);
    border-right: 1px solid #999999;
    text-align: center;
    .number-p {
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-bottom: 15px;
    }
    .text-p {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
  > div:last-child {
    border: none;
  }
}
</style>
